<template>
  <el-dialog
      v-model="visible2"
      :visible="props"
      title="角色人员"
      @close="closeDialog"
      width="600px"
  >
    <div class="role-info">
      <span class="role-name">{{props.roleName}}</span>
    </div>
    <el-table
        :data="userData"
        style="width: 100%"
        border
        header-row-class-name="custom-header"
    >
      <el-table-column prop="username" label="账号" width="180" align="center"></el-table-column>
      <el-table-column prop="realname" label="姓名" width="180" align="center"></el-table-column>
      <el-table-column prop="phone" label="电话" align="center"></el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
// 保持原有的script部分完全不变
import {onMounted, ref, watch} from "vue";
import axios from "axios";
const visible2 = ref(false);
const props = defineProps({
  visible:{
    type:Boolean,
    required:false,
    default:false
  },
  roleId:{
    type:Number,
    required:true
  },
  roleName:{
    type:String,
    required:true
  }
});
watch(() => props.visible, () => {
  visible2.value =props.visible;
})

// ==================子传父
const emits = defineEmits("")
const closeDialog = () => {
  visible2.value = false;
  emits("visible2",visible2.value);
}
// ==================子传父

const userData = ref([]);
const getRoleUser = () => {
  axios.get(`/roleUser/getRoleUser/${props.roleId}`).then(resp => {
    userData.value = resp.data;
  })
}
watch( () => props.roleId,() => {
  getRoleUser();
})
onMounted(()=> {
})
</script>

<style scoped>
/* 对话框样式 */
:deep(.el-dialog) {
  border-radius: 8px;
}

:deep(.el-dialog__header) {
  border-bottom: 1px solid #eee;
  padding: 15px 20px;
  margin: 0;
}

:deep(.el-dialog__title) {
  font-size: 16px;
  font-weight: bold;
}

/* 角色信息样式 */
.role-info {
  padding: 12px 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #eee;
}

.role-name {
  font-size: 14px;
  color: #606266;
}

/* 表格样式 */
:deep(.custom-header th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

:deep(.el-table) {
  margin-top: 0;
}

:deep(.el-table__body-wrapper) {
  max-height: 400px;
  overflow-y: auto;
}

:deep(.el-table td) {
  padding: 12px 0;
}
</style>